import React from 'react';
import { Form, Input, Select, Button, Row, Col,message } from 'antd';
import './use.css'
import request from '../../utils/request'
import { useHistory } from "react-router-dom";
// import { Link, withRouter } from "react-router-dom"
// import Next from '../../pages/next/Next';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 3,//控制label的框的长度
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,//控制文本框长度
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};



const RegistrationForm = (props) => {
  const [form] = Form.useForm();
  let history = useHistory();
  console.log(form.getFieldsValue());

  const my = () => {
    let uemail = form.getFieldsValue().email
    console.log(uemail, '222');
    request.post("/orderList/nice/user/getEqualsEmail", { uemail }).then(res => {
      console.log(res, 'pd');
      if (res.data) {
        message.success('该邮箱可以登录');
      }
      else {
        message.error('邮箱已存在');

      }
    })
  }

  const getYan = () => {
    let uemail = form.getFieldsValue().email
    console.log(form.getFieldsValue().email, 'eeee');
    request.post("/orderList/nice/user/addemail", { uemail }).then(res => {
      console.log(res, 'youxiang')
      // this.setState({
      //    img: res,
      // })
    })
  }


  const onFinish = (values) => {
    
    const { sex, area, username } = props;
    console.log(values, 'values');
    let uemail = form.getFieldsValue().email
    let password = form.getFieldsValue().password
    let captcha = form.getFieldsValue().captcha
    request.post("/orderList/nice/user/addUser", { uemail, password, captcha, sex, username, area }).then(res => {   
      console.log(res, 'youxiang')
      message.success('注册成功');
      setTimeout(()=>{
          history.push('/EmailLogin');
      },1000)
    })
    

  };

  const onValuesChange = (change, all) => {
    console.log(change, 'change');
    console.log(all, 'all');
  }

  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select
        style={{
          width: 70,
        }}
      >
      </Select>
    </Form.Item>
  );
  return (

    <Form
      {...formItemLayout}
      form={form}
      name="register"
      onFinish={onFinish}
      scrollToFirstError
      id='user'
      onValuesChange={onValuesChange}
      setFieldsValue
    >

      <Form.Item
        name="email"
        label="邮箱"
        rules={[
          {
            required: true,
            message: '请输入你的邮箱!',
          },
        ]}
      >
        <Input
          style={{
            width: '100%',
          }}
          placeholder='请设置用户登陆的邮箱'
          onBlur={my.bind(this)}
        />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: '请输入你的密码!',
          },
        ]}
        hasFeedback
        placeholder='请设置密码'
      >
        <Input.Password />
      </Form.Item>
      {/* <Form.Item
        name="password"
        label="验证码"
        rules={[
          {
            required: true,
            message: '请输入你的验证码!',
          },
        ]}
        // hasFeedback
        placeholder='请输入验证码'
      >
        <Input />
        <Button style={{ marginTop: '0.2rem' }} onClick={getYan.bind(this)}>获取验证码</Button>
      </Form.Item> */}



      <Form.Item label="验证码" extra="We must make sure that your are a human.">
        <Row gutter={8}>
          <Col span={12}>
            <Form.Item
              name="captcha"
              noStyle
              rules={[
                {
                  required: true,
                  message: '请输入你获取到的验证码!',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Button onClick={getYan.bind(this)}>获取验证码</Button>
          </Col>
        </Row>
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
        {/* <Link to='/'> */}
        <Button htmlType="submit" style={{ width: '100%', background: '#fae100', outline: 'none', border: 0, height: '1rem' }}>
          下一步
        </Button>
        {/* </Link> */}
      </Form.Item>
    </Form>
  );
};

export default RegistrationForm